<template>
  <v-card>
    <v-divider/>
    <v-data-table
      :headers="headers"
      :items="seckills"
      :pagination.sync="pagination"
      :total-items="totalGoods"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.skuId }}</td>
        <td class="text-xs-center">{{ props.item.sku.title }}</td>
        <td class="text-xs-center">{{ props.item.enableSeckillNum }}</td>
        <td class="text-xs-center">{{ props.item.totalSeckillNum}}</td>
        <td class="text-xs-center">{{ props.item.seckPrice }}</td>
        <td class="text-xs-center">{{ props.item.sku.price }}</td>
        <td class="text-xs-center">{{ props.item.endTime}}</td>
        <td class="justify-center layout px-0">
          <v-btn icon @click="deleteGoodById(props.item.skuid)">
            <i class="el-icon-delete"/>
          </v-btn>
        </td>
      </template>
    </v-data-table>

  </v-card>
</template>

<script>
    export default {
        name: "seckill",
        data() {
          return {
            totalSeckills: 0, // 总条数
            seckills: [], // 当前页秒杀商品信息
            loading: true, // 是否在加载中
            pagination: {}, // 分页信息
            headers: [
              {text: 'id', align: 'center',  value: 'skuid', sortable: false,},
              {text: '标题', align: 'center',  value: 'sku.title', sortable: false,},
              {text: '已售数量', align: 'center', sortable: false, value: 'enableseckillnum'},
              {text: '总数量量', align: 'center', sortable: false, value: 'totalseckillnum'},
              {text: '活动价格', align: 'center', value: 'seckpric', sortable: false,},
              {text: '活动前价格', align: 'center', value: 'sku.price', sortable: false,},
              {text: '结束时间', align: 'center', sortable: false,},
              {text: '操作', align: 'center', sortable: false, }
            ],
          }
        },
        created() {
          // 查询数据
          this.getDataFromServer();
        },
        watch:{
          pagination: { // 监视pagination属性的变化
            deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
            handler() {
              // 变化后的回调函数，这里我们再次调用getDataFromServer即可
              this.getDataFromServer();
            }
          }
        },
        methods:{
          getDataFromServer() { // 从服务的加载数的方法。
            // 发起请求
            this.$http.get("/item/seckills/page", {
              params: {
                page: this.pagination.page,// 当前页
                rows: this.pagination.rowsPerPage,// 每页大小
              }
            }).then(resp => { // 这里使用箭头函数

              this.seckills = resp.data.items;
              this.seckills.forEach(s=>{
                s.seckPrice = s.seckPrice/100+".00"
                s.sku.price = s.sku.price/100+".00"
              })
              this.totalSeckills = resp.data.total;
              console.log(this.seckills)
              // 完成赋值后，把加载状态赋值为false
              this.loading = false;
            })
          },
        }
    }
</script>

<style scoped>

</style>
